<template>
    <div>
      <div class="title">周末去哪</div>
      <ul>
        <li class="item"  v-for="item of weekend" :key="item.id">
            <div class="item-img-wrapper">
              <img class="item-img" :src="item.imgUrl" alt="">
            </div>
            <div class="item-info">
            <p class="item-title">{{ item.title}}</p>
            <p class="item-desc">{{ item.desc}}</p>
          </div>
        </li>
      </ul>
    </div>
  </template>

<script>
export default {
  name: 'HomeWeekend',
  // data是个函数要有返回值,
  props: {
    weekend: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.2rem;
.item-img-wrapper
    overflow: hidden
    height :0
    padding-bottom :37.09%
  .item-img
    width :100%
  .item-info
    padding: .1rem
    .item-title
      line-height :.54rem
      font-size :.32rem
      ellipsis()
    .item-desc
      line-height :.4rem
      color: #ccc
      ellipsis()

</style>
